<template>
    <a-table ref="table"
             :loading="loading"
             class="page-table"
             :style="{height: tableHeightCont + 'px'}"
             :scroll="{ x: scorllWidth, y: height }"
             :pagination="pagination"
             :rowClassName="rowClassName"
             @change="paginationOnChange"
             :rowKey="tableDatas => tableDatas.id"
             :data-source="tableData">
        <a-table-column key="age" title="" :width="20" :fixed="'left'" data-index="age"/>
        <a-table-column v-for="(item) in columns"
                        :key="item.dataIndex"
                        :data-index="item.dataIndex"
                        :width="item.width || ''"
                        :fixed="item.fixed"
                        :ellipsis="item.ellipsis"
                        :title="item.title">
            <template slot-scope="text, record">
                <template v-if="item.render">
                    <template v-if="item.render === 'btn'">
                        <a-button type="link" v-for="(btn, key) in item.btn"
                                  :style="btn.style && btn.style(record)"
                                  class="link-btn"
                                  @click="btn.event && btn.event(record)"
                                  :key="key">
                            <kIcon v-if="btn.icon" :type="btn.icon"/>
                            {{btn.label}}
                        </a-button>
                    </template>
                    <template v-if="item.render === 'alarmContent'">
                        <p :style="item.style && item.style(record)">{{record.dateTime}}&nbsp;{{alarmType[record.alarmContent] &&
                            alarmType[record.alarmContent].label}}</p>
                        <p v-if="[3, 2].indexOf(record.alarmContent) > -1"
                           :style="item.style && item.style(record)">报警值：143/87mmHg</p>
                        <p :style="item.style && item.style(record)" v-else>
                            位置： {{record.site}}
                        </p>
                    </template>
                    <template v-if="item.render === 'contactRows'">
                        <p :style="item.style && item.style(record)"
                           v-for="(contactItem, contactKey) in record.contact"
                           :key="'phone' + contactKey">
                            {{contactItem.name}}&nbsp;{{contactItem.phone}}
                        </p>
                    </template>
                    <span v-if="item.render === 'isHandling'" :style="item.style && item.style(record)">
                        {{record.isHandling ? text : ''}}
                    </span>
                </template>
                <span :style="item.style && item.style(record)" v-else>{{item.formatting ? item.formatting(text) : text}}</span>
            </template>
        </a-table-column>
    </a-table>
</template>

<script>
    import {heightListen} from "@/utils/mixin";
    import {alarmType} from '@/config/configuration'
    import kIcon from '../../utils/k-icon';
    export default {
        name: "index",
        mixins: [heightListen],
        components: {kIcon},
        props: {
            columns: {
                type: Array,
                required: require,
            },
            api: {
                type: Function,
                default: () => {
                }
            },
            scorllWidth: {
                default: 1200
            },
            rowClassName: {
                type: Function,
                default: () => {}
            }
        },
        data() {
            return {
                alarmType,
                loading: false,
                height: 500,
                tableHeightCont: 500,
                tableData: [],
                currentPage: 1,
                pagination: {
                    defaultCurrent: 1,
                    total: 0,
                    size:'small',
                    pageSize: 10,//每页中显示10条数据
                    showSizeChanger: true,
                    pageSizeOptions: ["10", "20", "30", "50"],//每页中显示的数据
                    showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
                }
            }
        },
        created() {
            this.$nextTick(() => {
                this.height = this.fullHeight - this.$refs['table'].$el.offsetTop - 200;
                this.tableHeightCont = this.fullHeight - this.$refs['table'].$el.offsetTop - 85;
            })
            this.requestData();
        },
        mounted() {
            console.log('ss');
        },
        watch: {
            fullHeight(value) {
                this.height = value - this.$refs['table'].$el.offsetTop - 200;
                this.tableHeightCont = value - this.$refs['table'].$el.offsetTop - 85;
            }
        },
        methods: {
            requestData() {
                this.loading = true;
                this.api({
                    page: this.currentPage,
                    pageSize: this.pagination.pageSize
                }).then(({data}) => {
                    this.tableData = data.list;
                    this.pagination.total = data.total;
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },
            paginationOnChange({current, pageSize}) {
                this.currentPage = current;
                this.pagination.pageSize = pageSize;
                this.requestData();
            }
        }
    }
</script>

<style lang="less">
    .page-table {
        p{
            margin: 0;
            padding: 0;
        }
        .link-btn{
            padding: 5px!important;
        }
        .ant-table-thead > tr > th {
            background: #fff !important;
        }
        .ant-spin-nested-loading > div > .ant-spin{
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .ant-table-placeholder {
            border-bottom: none !important;
            padding-top: 200px;
        }
        .ant-spin-nested-loading {
            height: inherit;

            .ant-spin-container {
                height: inherit;

                .ant-table {
                    height: calc(100% - 62px);
                    .ant-table-content, .ant-table-scroll {
                        height: 100%;

                        .ant-table-body {
                            height: calc(100% - 54px);
                            overflow: scroll!important;
                            transition: all .3s linear;
                        }
                        .ant-table-body::-webkit-scrollbar {
                            width: 5px;
                            height: 5px;
                        }
                        .ant-table-body::-webkit-scrollbar-track {
                            border-radius: 10px;
                            background-color: transparent;
                        }
                        .ant-table-body::-webkit-scrollbar-thumb {
                            background-color: transparent;
                            border-radius: 10px;
                        }
                        .ant-table-body:hover{
                            &::-webkit-scrollbar-thumb {
                                background-color: rgba(204,204,204,0.44);
                            }
                        }
                    }
                }
            }
        }

        .ant-table-header .ant-table-hide-scrollbar,.ant-table-fixed-header .ant-table-body-inner::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        .ant-table-header .ant-table-hide-scrollbar,.ant-table-fixed-header .ant-table-body-inner::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: transparent;
        }
        .ant-table-header .ant-table-hide-scrollbar,.ant-table-fixed-header .ant-table-body-inner::-webkit-scrollbar-thumb {
            background-color: transparent;
            border-radius: 10px;
        }
        .ant-table-header .ant-table-hide-scrollbar,.ant-table-fixed-header .ant-table-body-inner:hover{
            &::-webkit-scrollbar-thumb {
                background-color: rgba(204,204,204,0.44);
            }
        }
    }
    .ant-table-header{
        background: transparent;
    }
</style>
